<template>
    <div>
        
        <!-- 操作区域 -->
        <div class="card" style="margin-bottom:10px;">
            <el-button type="primary" @click="handleAdd">新增</el-button>
            <el-button type="danger" @click="handleDeleteBatch">批量删除</el-button>
        </div>
        <!-- 数据表区域 -->
        <div class="card" style="margin-bottom:5px;">
            <!-- 数据表 -->
            <el-table :data="data.tableData" stripe @selection-change="handleSelection" row-key="id">
                <el-table-column type="selection" width="55"/>
                <el-table-column label="机构代码" prop="code" />
                <el-table-column label="机构名称" prop="name" />
                <el-table-column label="状态" prop="status" />
                <el-table-column label="备注" prop="remark" show-overflow-tooltip />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button link type="primary" :icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button link type="danger" :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            
        </div>
        
        <!-- 新增编辑弹出框 -->
        <el-dialog v-model="data.formVisible" title="机构信息" width="500" destroy-on-close>
            <el-form ref="formRef" :rules="data.rules" :model="data.form" style="margin:20px;" label-width="auto">
                
                <el-form-item label="机构代码" prop="code">
                    <el-input v-model="data.form.code" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="机构名称" prop="name">
                    <el-input v-model="data.form.name" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="上级机构">
                    <el-input v-model="data.form.pid" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="机构状态">
                    <el-radio-group v-model="data.form.status">
                        <el-radio value="0" label="正常"></el-radio>
                        <el-radio value="1" label="停用"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" :rows="3" v-model="data.form.remark" autocomplete="off"/>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="data.formVisible = false">取消</el-button>
                    <el-button type="primary" @click="save">保存</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 新增编辑弹出框结束 -->
    </div>
</template>
<script setup>
import { reactive ,ref} from 'vue'
import { Search,Delete,Edit } from '@element-plus/icons-vue'
import request from "@/utils/request"
import { ElMessageBox } from 'element-plus'
const data = reactive({
    tableData: [],
    formVisible:false,
    form:{},
    ids:[],
    rules:{
        code:[
            {required:true,message:'请输入机构代码',trigger:'blur'}
        ],
        name:[
            {required:true,message:'请输入机构名称',trigger:'blur'}
        ]
    }
})

const formRef = ref()

//数据表数据加载函数
const dataLoad = ()=>{
    request.post("/system/org/getTreeList").then(res=>{
        if(res.code===0){ //访问接口成功后绑定数据
            
            data.tableData = res.data
        }else{
            ElMessage.error(res.message)
        }
        
    })
}
//执行加载数据函数
dataLoad()

//打开新增弹窗
const handleAdd=()=>{
    data.formVisible = true
    data.form={}
}

//打开编辑弹窗，并加载需要编辑数据
const handleEdit=(row)=>{
    data.form = JSON.parse(JSON.stringify(row))//深拷贝一个新的对象用于编辑，不影响现有的
    data.formVisible = true
}

//
const handleDelete=(row)=>{
    ElMessageBox.confirm("确认删除数据？",'删除确认',{type:'warning'}).then(()=>{
        request.delete('/system/org/deleteById',{
            params:{
                id:row.id
            }
        }).then(res=>{
            if(res.code===0){
                ElMessage.success("操作成功")
                dataLoad()
            }else{
                ElMessage.error(res.message)
            }
        })
    }).catch()
   
}

const save=()=>{
    formRef.value.validate((valid)=>{
        if(valid){
            data.form.id?update():add()
        }
    })
    
   
}
const add = ()=>{
    request.post('/system/org/save',data.form).then(res=>{
        if(res.code===0){
            data.formVisible=false
            ElMessage.success("操作成功")
            dataLoad()
        }else{
            ElMessage.error(res.message)
        }
    })
}

const update=()=>{
    request.put('/system/org/update',data.form).then(res=>{
        if(res.code===0){
            data.formVisible=false
            ElMessage.success("操作成功")
            dataLoad()
        }else{
            ElMessage.error(res.message)
        }
    })
}

const handleSelection=(rows)=>{
    console.log(rows)
    data.ids = rows.map(row => row.id)
    
    console.log(data.ids)
}

const handleDeleteBatch=()=>{
    if(data.ids.length===0){
        ElMessage.warning("请选择数据")
        return
    }
    ElMessageBox.confirm("确认删除数据？",'删除确认',{type:'warning'}).then(()=>{
        request.delete('/system/org/deleteByIds',{data:data.ids}).then(res=>{
            if(res.code===0){
                ElMessage.success('操作成功')
                dataLoad()
            }else{
                ElMessage.error(res.message)
            }
        })
    }).catch()
}

</script>